<template>
  <div class="divBox">
    <el-card class="box-card">
      <div class="clearfix">
        <div class="container">
          <el-form inline size="small" label-width="120px">
            <!-- <el-form-item :label="$t('shiJianXuanZe') + '：'" class="width100">
              <el-radio-group
                v-model="tableFrom.dateLimit"
                type="button"
                class="mr20"
                size="small"
                @change="selectChange(tableFrom.dateLimit)"
              >
                <el-radio-button
                  v-for="(item, i) in fromList.fromTxt"
                  :key="i"
                  :label="item.val"
                >{{ $t(item.text) }}
                </el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-model="timeVal"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                size="small"
                type="daterange"
                placement="bottom-end"
                :start-placeholder="$t('kaiShiRiQi')"
                :end-placeholder="$t('jieShuRiQi')"
                style="width: 220px"
                @change="onchangeTime"
              />
            </el-form-item> -->
            <el-form-item label="导入类型：">
              <el-radio-group v-model="tableFrom.importAction" type="button" @change="getList">
                <el-radio-button label="">{{ $t('quanBu') }}</el-radio-button>
                <el-radio-button label="PRODUCT_IMPORT">{{ 'PRODUCT_IMPORT'|importAction }}</el-radio-button>
                <el-radio-button label="STOCK_IMPORT">{{ 'STOCK_IMPORT'|importAction }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>

          <el-button type="primary" size="small" @click="bulkImportFn">商品导入</el-button>
          <el-button type="primary" size="small" @click="batchUpdateFn">商品库存导入</el-button>
        </div>

      </div>
    </el-card>
    <div class="mt20" />
    <el-card class="box-card">
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="mini"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column prop="importAction" label="导入类型" min-width="160">
          <template slot-scope="scope">{{ scope.row.importAction | importAction }}</template>
        </el-table-column>
        <el-table-column prop="totalNum" label="导入数量" min-width="160" />
        <el-table-column prop="successNum" label="成功数量" min-width="160" />
        <el-table-column prop="failNum" label="失败数量" min-width="160" />
        <el-table-column prop="createTime" label="创建时间" min-width="160" />
        <el-table-column :label="$t('caoZuo')" min-width="180" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.failNum>0"
              type="text"
              size="small"
              @click="editFn(scope.row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>

    <bulkImportDialog ref="bulkImportDialog" @getList="getList(1)" />
    <batchUpdateDialog ref="batchUpdateDialogRef" @getList="getList(1)" />
  </div>
</template>

<script>
import request from '@/utils/request'
import bulkImportDialog from '@/components/importDialog/bulkImportDialog'
import batchUpdateDialog from '@/components/importDialog/batchUpdateDialog'
export default {
  components: { bulkImportDialog, batchUpdateDialog },
  filters: {
    importAction(key) {
      let label = ''
      switch (key) {
        case 'PRODUCT_IMPORT':
          label = '商品导入'
          break
        case 'STOCK_IMPORT':
          label = '商品库存导入'
          break
      }
      return label
    }
  },
  data() {
    return {
      orderId: '',
      tableData: {
        data: [],
        total: 0
      },
      listLoading: true,
      tableFrom: {
        importAction: '',
        dateLimit: '',
        page: 1,
        limit: 20
      },
      timeVal: [],
      fromList: this.$constants.fromList,
      selectionList: [],
      ids: '',
      tableFromLog: {
        page: 1,
        limit: 10
      },
      tableDataLog: {
        data: [],
        total: 0
      },
      LogLoading: false,
      dialogVisible: false,
      cardLists: [],
      orderDatalist: null
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    selectChange(tab) {
      this.tableFrom.dateLimit = tab
      this.timeVal = []
      this.getList()
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e
      this.tableFrom.dateLimit = e ? this.timeVal.join(',') : ''
      this.getList()
    },
    // 列表
    getList() {
      this.listLoading = true
      request({
        url: '/admin/merchant/commonImport/list',
        method: 'POST',
        data: this.tableFrom
      }).then((res) => {
        this.tableData.data = res.list
        this.tableData.total = res.total
        this.listLoading = false
      })
        .catch((res) => {
          this.listLoading = false
        })
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getList()
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList()
    },
    editFn(row) {
      switch (row.importAction) {
        case 'PRODUCT_IMPORT':
          this.$refs.bulkImportDialog.show(row)
          break
        case 'STOCK_IMPORT':
          this.$refs.batchUpdateDialogRef.show(row)
          break
      }
    },
    bulkImportFn() {
      this.$refs.bulkImportDialog.show()
    },
    // 批量更新
    batchUpdateFn() {
      this.$refs.batchUpdateDialogRef.show()
    }
  }
}
</script>

<style lang="scss" scoped>
.selWidth {
  width: 300px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.tabBox_tit {
  width: 60%;
  font-size: 12px !important;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  padding: 5px 0;
  box-sizing: border-box;
}
.mt20 {
  margin-top: 20px;
}
.demo-image__preview {
  position: relative;
  padding-left: 40px;
}
.demo-image__preview .el-image,
.el-image__error {
  position: absolute;
  left: 0;
}
.maxw180 {
  display: inline-block;
  max-width: 180px;
}
</style>
